<template>
    <div id="kind_shop_display" >
        <div class="goods_display" v-for="(item,index) in message" :key="index"
             @click="toDetail(index)">
            <img :src="item.img" alt="" class="shop_img" v-if="item.img">
            <p class="shop_title">{{item.title}}</p>
            <span class="shop_price" v-if="item.price">{{item.price}}元</span>
            <span v-if="item.price"><img src="../../../assets/img/goods/start.png" alt="" class="start" ></span>
            <p v-else class="error">无此商品,请选择其他商品!</p>
            <span class="shop_cFav">{{item.cfav}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "KindShopDisplay",
        props:{
            message:{
                type:Array,
                default(){
                    return []
                }
            }
        },
        methods:{
            toDetail(index){
                this.$router.push({
                    path:'/detail',
                    query:{id:this.message[index].iid}
                })
            }
        }
    }
</script>

<style scoped>
    #kind_shop_display{
        padding-top: 5px;
        display: flex;
        flex-wrap: wrap;
    }
    .goods_display{
        width: 110px;
        margin-bottom: 10px;
        margin-left: 2px;
        border: 1px #f6f6f6 outset;
        border-radius: 5px;
    }
    .shop_title{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .shop_img{
        width: 110px;
        height: 150px;
        border-radius: 5px;
    }
    .shop_price{
        color: red;
        font-size: 12px;
        margin-left: 5px;
    }
    .start{
        margin-left: 5px;
    }
    .shop_cFav{
        margin-left: 2px;
        font-size: 10px;
    }
    .error{
        margin-top: 50%;
        text-align: center;
        color: gainsboro;
    }
</style>